<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>传悦后台</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
	<style type="text/css">
		.cover{display: none;}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){

			function  popup(e){
				e.biaoti = e.biaoti || "标题";
				e.zhengwen = e.zhengwen;
				var popup = $(`
					<div class="popup">
						<span class="glyphicon glyphicon-remove popup-close" style="position:absolute;top:20px;right:10px;"></span>
						<h3 class="biaoti"></h3>
						<div class="zhengwen">
							<button class="btn btn-primary data-confirm">确认修改</button>
							<button class="btn btn-default data-cancel">取消修改</button>
						</div>
					</div>`);

				var mask = $(`<div class="mask"></div>`);
				var biaoti = popup.find(".biaoti");
				var close = popup.find(".popup-close");
				var zhengwen = popup.find(".zhengwen");
				var confirmButton = popup.find(".data-confirm");
				var cancelButton = popup.find(".data-cancel");

				zhengwen.css({marginTop:30})
				biaoti.html(e.biaoti)


				mask.css({
					backgroundColor:"rgba(0,0,0,.4)",
					position:"absolute",
					top:0,
					left:0,
					width:"100%",
					height:$(window).height()
				}).appendTo($("body"))


				popup.css({
					width:500,
					padding:20,
					backgroundColor:"#fff",
					position:"absolute",
					left:"50%",
					top:"50%",
					transform:"translate(-50%,-50%)"
				}).appendTo($("body"))



				function guanbi(){
					mask.remove()
					popup.remove()
				}


				close.click(function(){
					guanbi();
				})
				cancelButton.click(function(){
					guanbi();
				})


				confirmButton.click(function(){
					guanbi();



					$.ajax({
						url:`http://192.168.0.8:8087/amendPost`,
						data:{
							id:popup.find(".data-id").val(),
							biaoti:popup.find(".data-biaoti").val(),
							zhengwen:popup.find(".data-zhengwen").val(),
							biaoqian:popup.find(".data-biaoqian").val()
						},
						success:function(data){
							if(data == "success"){
								alert("修改成功")
								location.reload() 
							}
							else{
								alert("操作失败")
							}
						}
					})

				})

				if(typeof e.zhengwen === "string"){
					zhengwen.html(e.zhengwen)
				}
				if(typeof e.zhengwen === "object"){
					var o = e.zhengwen.clone();
					o[0].style.display = 'block'
					zhengwen.prepend(o)
				}
			}



			// 删除数据
			$(".data-delete").click(function(){
				if(confirm("确定要删除此项数据吗？该操作不可逆")){

					var id = $(this).closest("tr").find(".data-id").html();


					var http = new XMLHttpRequest();
					http.open("get",`http://192.168.0.8:8087/deletePost?id=${id}`);
					http.send();

					http.onreadystatechange = function(){
						if(http.readyState == 4){
							if(http.responseText == "success"){
								alert("删除成功");
								location.reload() 
							}
							else{
								alert("操作失败")
							}
						}
					}

				}
			})

			$(".data-edit").click(function(){
				var id = $(this).closest("tr").find(".data-id").html();

				$.ajax({
					url:`http://192.168.0.8:8087/findPost`,
					data:{
						id:id
					},
					success:function(data){
						var data = JSON.parse(data)[0];
						$(".cover").find(".data-id").val(data.id)
						$(".cover").find(".data-biaoqian").val(data.biaoqian)
						$(".cover").find(".data-biaoti").val(data.biaoti)
						$(".cover").find(".data-zhengwen").val(data.zhengwen)
						popup({
							biaoti:"编辑新闻",
							zhengwen:$(".cover")
						})
					}
				})
			})
		})

	</script>
</head>
<body>
	<h2>传悦后台</h2>
	<table class="table table-striped">
		<thead>
			<tr>
				<th>ID</th>
				<th>标题</th>
				<th>正文</th>
				<th>编辑</th>
			</tr>
		</thead>
		<tbody>
			<% for(var i = 0; i< data.length;i++){ %>
				<tr>
					<td class="data-id"><%= data[i].id %></td>
					<td><%= data[i].biaoti %></td>
					<td><%= data[i].zhengwen.substring(0,150) %></td>
					<td >
						<button class="btn btn-primary data-edit">编辑</button>				
						<button class="btn btn-danger data-delete">删除</button>
					</td>
				</tr>
			<% } %>
		</tbody>
	</table>
	<div class="cover">
		<div class="form-group">
			<label>id</label>
			<input type="text" class="form-control data-id" disabled>
		</div>

		<div class="form-group">
			<label>标签</label>
			<input type="text" class="form-control data-biaoqian">
		</div>

		<div class="form-group">
			<label>标题</label>
			<input type="text" class="form-control data-biaoti">
		</div>

		<div class="form-group">
			<label>正文</label>
			<textarea class="form-control data-zhengwen" rows="15"></textarea>
		</div>
		
	</div>
</body>
</html>